<template>
	<view>
		<uni-popup ref="memberInquirePopup" type="center" @change="popupChange">
			<view class="member-inquire-wrap">
				<view class="member-header">
					<text class="title">会员列表</text>
					<text class="iconfont iconguanbi1" @click="$refs.memberInquirePopup.close()"></text>
				</view>
				<view class="member-content">
					<view class="search-warp">
						<view class="search-input">
							<input focus placeholder="可查询会员账号、手机号、昵称" placeholder-style="font-size:0.14rem"
								v-model="searchText" @confirm="searchMember()" :focus="inputFocus"
								@focus="inputFocus = true" @blur="inputFocus = false" />
							<button class="switch primary-btn" @click="searchMember()">查询 [Enter]</button>
							<button class="default-btn" plain="true"
								@click="$refs.memberEnteringPopup.open()">添加会员</button>
						</view>
					</view>
					<scroll-view @scrolltolower="getMemberList()" scroll-y="true" class="member-list">
						<view :class="['member-item', { active: item.member_id == memberId }]"
							v-for="(item, index) in memberList" :key="index" @click="getMemberInfo(item.member_id)">
							<image class="item-img" mode="aspectFill" v-if="item.headimg" :src="$util.img(item.headimg)"
								@error="item.headimg = defaultImg.head"></image>
							<image class="item-img" mode="aspectFill" v-else :src="$util.img(defaultImg.head)"></image>
							<view class="item-content">
								<view class="name">
									<text>{{ item.nickname }}</text>
								</view>
								<view class="phone">手机号：{{ item.mobile }}</view>
								<view class="other">
									<view>
										余额：{{ parseFloat(parseFloat(item.balance) + parseFloat(item.balance_money)).toFixed(2) }}
									</view>
								</view>
							</view>
						</view>
						<view v-if="memberList.length == 0" class="empty">
							<image :src="$util.img('public/uniapp/cashier/member-empty.png')" mode="widthFix"></image>
							<view class="tips">暂无会员</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="memberEnteringPopup" type="center">
			<view class="member-entering-wrap">
				<view class="header">
					<text class="title">录入会员</text>
					<text class="iconfont iconguanbi1" @click="memberEnteringClose()"></text>
				</view>
				<view class="form-content">
					<view>
						<view class="form-item">
							<view class="form-label">
								<text class="required">*</text>
								手机号：
							</view>
							<view class="form-inline search-wrap"><input type="number" class="form-input"
									v-model="memberData.mobile" placeholder="请输入会员手机号" /></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								会员名称：
							</view>
							<view class="form-inline search-wrap"><input type="text" class="form-input"
									v-model="memberData.nickname" placeholder="请输入会员昵称" /></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								性别：
							</view>
							<view class="form-inline search-wrap"><uni-data-checkbox v-model="memberData.sex"
									selectedColor="#8558FA" :localdata="sex"></uni-data-checkbox></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								生日：
							</view>
							<view class="form-inline">
								<uni-datetime-picker :start="startDate" v-model="memberData.birthday" type="date"
									:clearIcon="false" @change="changeTime" />
							</view>
						</view>

						<view class="form-item" v-if="memberLevelList.length">
							<view class="form-label">
								<text class="required"></text>
								会员等级：
							</view>
							<view class="form-inline">
								<select-lay :zindex="10" :value="memberData.member_level" name="names"
									placeholder="请选择会员等级" :options="memberLevelList"
									@selectitem="selectMemberLevel"></select-lay>
							</view>
						</view>
					</view>
					<view class="btn-wrap"><button type="primary" class="primary-btn" @click="addMember">确定录入</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberList: [],
				searchText: '',
				page: 1,
				one_judge: true, // 第一次请求列表、详情渲染判断
				memberId: '',
				startDate: '1900-1-1',
				memberData: {
					sex: 0,
					mobile: '',
					nickname: '',
					birthday: '',
					headimg: '',
					member_level: '',
					member_level_name: ''
				},
				memberLevelList: [], //会员等级
				sex: [{
						text: '未知',
						value: 0
					},
					{
						text: '男',
						value: 1
					},
					{
						text: '女',
						value: 2
					}
				],
				flag: false,
				popupShow: false,
				active: '', //活动值
				inputFocus: false
			};
		},
		created() {
			this.getMemberList();
			this.getMemberLevel();
		},
		methods: {
			popupChange(e) {
				this.popupShow = e.show;
			},
			open(callback) {
				this.$refs.memberInquirePopup.open('', callback);
				this.inputFocus = true;
			},
			searchMember() {
				this.page = 1;
				this.getMemberList(Boolean(this.searchText));
			},
			// 查询会员列表
			getMemberList(isSearch) {
				setTimeout(() => {
					let data = {
						page: this.page,
						page_size: 12,
						search_text: this.searchText
					};
					this.$api.sendRequest({
						url: '/cashier/storeapi/member/lists',
						data: data,
						success: res => {
							if (res.code >= 0) {
								this.searchText = '';
								if (this.page == 1) this.memberList = [];
								this.memberList = this.memberList.concat(res.data.list);
								this.memberList.forEach((item) => {
									if (item.mobile) {
										if (this.userInfo.is_admin == 0) {
											// 非管理员，不能查看会员手机号
											item.mobile = item.mobile.substring(0, 4 - 1) +
												'****' + item.mobile.substring(6 + 1);
										}
									} else {
										item.mobile = '--';
									}
								})

								if (isSearch) {
									// 默认选中第一个搜索结果
									this.memberId = 0;
									if (this.memberList.length) {
										this.active = 'SearchMember';
										this.memberId = this.memberList[0].member_id;
									}
								}
								if (res.data.page_count >= this.page) this.page++;
							}
						}
					});
				}, 200)
			},
			getMemberInfo(memberId, callback) {
				this.memberId = memberId;
				this.$api.sendRequest({
					url: '/cashier/storeapi/member/info',
					data: {
						member_id: memberId
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.$store.commit('setMemberInfo', res.data);
							this.$refs.memberInquirePopup.close();
							this.active = '';
							if (callback) callback();
						} else {
							this.$util.showToast({
								title: '未获取到会员信息'
							});
						}
					}
				});
			},
			/******************************** 录入会员 ********************************/
			getMemberLevel() {
				this.memberLevelList = [];
				this.$api.sendRequest({
					url: '/cashier/storeapi/memberlevel/lists',
					success: res => {
						if (res.code == 0 && res.data) {
							for (let i in res.data) {
								this.memberLevelList.push({
									label: res.data[i]['level_name'],
									value: res.data[i]['level_id'].toString(),
									disabled: false
								});
							}
						}
					}
				});
			},
			// 选择会员等级
			selectMemberLevel(index, item) {
				if (index >= 0) {
					this.memberData.member_level = item.value;
					this.memberData.member_level_name = item.label;
				} else {
					this.memberData.member_level = '';
					this.memberData.member_level_name = '';
				}
				this.$forceUpdate();
			},
			// 选择时间
			changeTime(e) {
				this.memberData.birthday = e;
			},
			verify() {
				if (!this.memberData.mobile) {
					this.$util.showToast({
						title: '请输入会员手机号'
					});
					return false;
				}
				if (!this.$util.verifyMobile(this.memberData.mobile)) {
					this.$util.showToast({
						title: '请输入正确的手机号码'
					});
					return false;
				}
				return true;
			},
			// 确定录入
			addMember() {
				if (this.verify()) {
					if (this.flag) return;
					this.flag = true;
					let data = this.memberData;
					this.$api.sendRequest({
						url: '/cashier/storeapi/member/addMember',
						data: this.memberData,
						success: res => {
							if (res.code == 0 && res.data) {
								this.memberEnteringClose();
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
							this.flag = false;
						}
					});
				}
			},
			memberEnteringClose() {
				this.$refs.memberEnteringPopup.close();
				this.page = 1;
				this.searchText = '';
				this.getMemberList();
			}
		}
	};
</script>

<style lang="scss">
	.member-inquire-wrap {
		overflow: hidden;
		width: 9.55rem;
		height: 5.37rem;
		background-color: #fff;
		border-radius: 0.05rem;

		.member-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.15rem;
			height: 0.45rem;
			line-height: 0.45rem;
			border-bottom: 0.01rem solid #e8eaec;

			.iconfont {
				font-size: $uni-font-size-lg;
			}
		}

		.member-content {
			padding: 0.1rem;

			.search-warp {
				margin-left: 0.1rem;

				.search-input {
					display: flex;
					align-items: center;
					margin-bottom: 0.05rem;

					input {
						flex: 1;
						padding-left: 0.1rem;
						width: 2.5rem;
						height: 0.4rem;
						line-height: 0.4rem;
						border: 0.01rem solid #dcdee2;
						border-right: none;
					}

					button {
						width: 2rem;
						height: 0.42rem;
						line-height: 0.42rem;
						color: #fff;
						font-size: $uni-font-size-base;
						margin: 0;

						&:last-of-type {
							margin-left: 0.15rem;
							margin-right: 0.1rem;
						}
					}
				}
			}

			/deep/ .uni-scroll-view-content {
				display: flex;
				flex-wrap: wrap;
				align-content: baseline;
				height: 430px;
			}

			.member-list {
				.member-item {
					display: flex;
					padding: 0.13rem 0.15rem;
					margin: 0.1rem;
					width: 2.9rem;
					height: 1rem;
					background-color: #f5f5f5;
					box-sizing: border-box;
					border-radius: 0.05rem;

					&.active {
						background-color: $primary-color;

						.name,
						.phone,
						.other>view {
							color: #fff;
						}
					}

					&:nth-child(3n + 3) {
						margin-right: 0;
					}

					image {
						width: 0.45rem;
						height: 0.45rem;
						border-radius: 50%;
						margin-right: 0.1rem;
						flex-shrink: 0;
					}

					.item-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
					}

					.name {
						text:nth-child(1) {
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
					}

					.phone {
						font-size: $uni-font-size-sm;
						color: #666;
					}

					.other {
						display: flex;
						justify-content: space-between;
						font-size: $uni-font-size-sm;

						view {
							font-size: $uni-font-size-sm;
							color: #666;
						}
					}
				}
			}
		}
	}

	// 录入会员
	.member-entering-wrap {
		width: 6.5rem;
		height: 3.66rem;
		background-color: #fff;
		border-radius: 0.05rem;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.15rem;
			height: 0.45rem;
			line-height: 0.45rem;
			border-bottom: 0.01rem solid #e8eaec;

			.iconfont {
				font-size: $uni-font-size-lg;
			}
		}

		.form-content {
			margin-top: 0.2rem;
			display: flex;
			flex-direction: column;
			align-items: center;

			.form-item {
				margin-bottom: 0.1rem;
				display: flex;

				.form-label {
					width: 0.9rem;
					text-align: right;
					padding-right: 0.1rem;
					box-sizing: border-box;
					height: 0.32rem;
					line-height: 0.32rem;

					.required {
						color: red;
						margin-right: 0.03rem;
					}
				}

				.form-inline {
					width: 2.4rem;
					line-height: 0.32rem;
					margin-right: 0.1rem;
					box-sizing: border-box;

					.form-input {
						border-width: 0.01rem;
						border-style: solid;
						background-color: #fff;
						color: rgba(0, 0, 0, 0.85);
						border-radius: 0.02rem;
						padding-left: 0.1rem;
						height: 0.32rem;
						line-height: 0.32rem;
						font-size: 0.14rem;
						border-color: #e6e6e6;
						border-radius: 0.02rem;
					}

					.form-textarea {
						border-width: 0.01rem;
						border-style: solid;
						background-color: #fff;
						color: rgba(0, 0, 0, 0.85);
						border-radius: 0.02rem;
						padding-left: 0.1rem;
						line-height: 0.32rem;
						font-size: 0.14rem;
						border-color: #e6e6e6;
						height: 1rem;
					}

					button {
						width: calc(50% - 0.05rem);
						display: inline-block;
						margin-right: 0.1rem;

						&:nth-child(2) {
							margin-right: 0;
						}
					}

					.upload-box {
						width: 0.7rem;
						height: 0.7rem;
						cursor: pointer;

						.upload-img {
							width: 100%;
							height: 100%;
							border: 0.01rem solid #e6e6e6;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.upload-icon {
							width: 100%;
							height: 100%;
							border: 0.01rem solid #e6e6e6;
							align-items: center;
							text-align: center;
							line-height: 1.2;
							display: flex;
							flex-direction: column;
							justify-content: center;
							color: #999;

							.iconfont {
								font-size: 0.3rem;
							}

							view {
								font-size: 0.12rem;
							}
						}
					}
				}

				.search-wrap {
					position: relative;

					i {
						position: absolute;
						top: 50%;
						right: 0.1rem;
						transform: translateY(-50%);
						border-left: 0.01rem solid #e6e6e6;
						line-height: 0.3rem;
						padding-left: 0.1rem;
						cursor: pointer;
					}
				}

				.label-list {
					width: calc(100% - 1.35rem);
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.label-item {
						border: 0.01rem solid #e6e6e6;
						padding: 0.07rem 0.1rem;
						line-height: 1;
						margin-right: 0.1rem;
						border-radius: 0.03rem;
						cursor: pointer;
						position: relative;
						margin-bottom: 0.1rem;

						i {
							position: absolute;
							right: -0.01rem;
							bottom: -0.01rem;
							color: $primary-color;
							display: none;
						}

						&.active {
							border-color: $primary-color;

							i {
								display: block;
							}
						}
					}
				}
			}

			.btn-wrap {
				position: absolute;
				bottom: 0.15rem;
				left: 0.25rem;
				right: 0.25rem;

				.primary-btn {
					height: 0.4rem;
					line-height: 0.4rem;
				}
			}
		}
	}

	.empty {
		text-align: center;
		padding-top: 0.8rem;
		width: 100%;

		image {
			width: 2rem;
		}

		.tips {
			color: #999;
			margin-top: 0.15rem;
		}
	}
</style>